<template>
  <!--  <div>user</div>-->
  <div class="user">

    <div class="user_top">
      <img src="http://login.114my.cn/memberpic/lixiaohua/uploadfile/image/20210724/20210724191904_488687526.jpg">
      <div class="user_top_title">
        <div>Another beautiful day</div>
        <p>as of 16:45:30 CST</p>
        <span>{{ formInline.depict }}</span>
      </div>
    </div>

    <div class="user_bottom">
      <div class="user_basic">
        <div class="user_basic_box">
          <div class="user_basic_title1">基本信息</div>
          <div class="user_basic_title2">我的年龄</div>
          <div class="user_basic_title3">
            {{ formInline.age }}
            <p>岁</p>
          </div>
          <div class="user_basic_title4">籍贯：{{ formInline.native_place }}</div>
          <div class="user_basic_title5">手机：{{ formInline.phone_number }}</div>
          <div class="user_basic_title6">微信：{{ formInline.wechat }}</div>
        </div>
        <img class="user_basuc_img"
             src="http://login.114my.cn/memberpic/lixiaohua/uploadfile/image/20210724/20210724191903_112061907.png">

      </div>
      <div class="user_stack"
      >
        <div class="user_stack_title">Technology stack</div>
        <div class="user_stack_box"
             v-for="(item,i) in dynamicTagsData"
             :key="i"
        >
          <div class="user_stack_box_left">
            <p>{{ item.name }}</p>
            <span>熟练程度：{{ item.value }}%</span>
          </div>
          <div class="user_stack_box_right">
            <img src="http://login.114my.cn/memberpic/lixiaohua/uploadfile/image/20210724/20210724203530_762330701.png"
                 alt="">
          </div>
        </div>

      </div>
      <div class="user_school">
        <div class="user_school_icon">
          <img
              src="	http://login.114my.cn/memberpic/lixiaohua/uploadfile/image/20210724/20210724203636_1169518377.png">
        </div>
        <div class="user_school_logo">
          <img
              src="	http://login.114my.cn/memberpic/lixiaohua/uploadfile/image/20210724/20210724193357_1030503293.png">
        </div>
        <div class="user_school_title">
          <div>{{ formInline.school }}</div>
          <p>{{ formInline.major }}</p>
          <p>{{ formInline.admission_time }}-{{ formInline.graduation_time }}</p>
          <p>{{ formInline.education }}</p>
        </div>
      </div>
      <div class="user_exploit">
        <p>开发方向</p>
        <div class="user_exploit_box" id="bar" ref="pie_ref"></div>
      </div>
    </div>

  </div>
</template>

<script>
import * as Echarts from "echarts";
import axios from "axios";

export default {
  data() {
    return {
      cateDate: {},
      formInline: {}, // 基本Î信息
      dynamicTagsData: {}, // 技术客栈
      direction: {},
      directionData:[],
      instance: null,
    }
  },

  methods: {
    //初始化
    echartsInit() {
      //生成比例尺
      let screenWidth = this.$refs.pie_ref.offsetWidth
      let proportion = screenWidth / 100 * 4

      //获取实例
      this.instance = Echarts.init(this.$refs.pie_ref)

      let chartDom = Echarts.init(document.querySelector("#bar"))
      window.addEventListener('resize', function () {
        chartDom.resize();
      });
      let option = {
        tooltip: {
          trigger: 'item',
          textStyle: {

          },
        },
        legend: {
          textStyle:{
            fontSize: 10,
          },
          bottom: "3%",
          icon: "circle",
          left: 'center',
        },
        series: [
          {
            type: 'pie',
            radius: ['20%', '60%'],
            center: ['50%', '42%'],

            avoidLabelOverlap: true,
            roseType: 'area',
            itemStyle: {
              borderRadius: 4,
              borderColor: '#fff',
              borderWidth: 0
            },

            label: {
              show: true,
              fontSize: 14,
              formatter(param) {
              }
            },
            emphasis: {
              label: {
                show: true,
                fontSize: proportion,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: true,
              length: 6,
              length2: 8
            },
            data: this.directionData
          }
        ]
      }
      chartDom.setOption(option)
    },

    getBlogList() {
      // 获取用户信息
      this.$axios.getUserInfo().then(res => {
        this.formInline = res.data
        this.formInline.admission_time = this.formInline.admission_time.substr(0, 4)
        this.formInline.graduation_time = this.formInline.graduation_time.substr(0, 4)
      })
      // 获取技术客栈信息
      this.$axios.getTechnical().then(res => {
        this.dynamicTagsData = res.data.filter(
            (item) => item.first_show
        );
      })
      this.$axios.getDirection({type: 1}).then(res => {
        console.log(res.data)
        res.data.forEach(item=>{
          item.value=100/res.data.length
        })
        this.directionData=res.data
        console.log()
        if(this.directionData != ''){
          this.echartsInit()
        }
      })
    },

  },
  mounted() {
    this.changeStyle(0)
    this.getBlogList()
  }
}

</script>

<style scoped lang="less">
.user {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  .user_top {
    width: 100%;
    border-radius: 2.083vw;
    height: 44vh;
    overflow: hidden;
    position: relative;
    position: relative;

    img {
      width: 100%;
      height: 100%;
    }

    .user_top_title {
      position: absolute;
      z-index: 10;
      width: 100%;
      bottom: 2.98vw;
      left: 3.167vw;
      letter-spacing: .15625vw;
      width: 100%;
      color: #fff;

      div {
        font-size: 1.354vw;
      }

      p {
        margin: 0.38vw 0 0.6vw;
        width: 40%;
        font-size: .833vw;

      }

      span {
        display: block;
        width: 40%;
        font-size: .833vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  .user_bottom {
    width: 100%;
    height: 42vh;
    display: flex;
    justify-content: space-between;

    .user_basic {
      position: relative;
      width: 22.898%;
      border-radius: 2.083vw;
      overflow: hidden;

      .user_basic_box {
        position: absolute;
        top: 3.4vh;
        left: 2.87vh;
        color: #fff;

        .user_basic_title1 {
          font-size: 1.354vw;
          font-weight: 700;
        }

        .user_basic_title2 {
          font-size: .9375vw;
          font-weight: 400;
          margin: 0.5vw 0 0.2vw 0;
        }

        .user_basic_title3 {
          font-size: 2.604vw;
          display: flex;
          align-items: flex-start;
          margin-bottom: 0vh;

          p {
            font-size: .833vw;
            background: #d96e2b;
            border-radius: 50%;
            width: 1.302vw;
            line-height: 1.302vw;
            display: block;
            text-align: center;
            margin-left: 0.26vw;
          }
        }

        .user_basic_title4, .user_basic_title5, .user_basic_title6 {
          font-size: .9375vw;
          line-height: 1.458vw;
        }
      }

      .user_basuc_img {
        display: block;
        width: 100%;
        height: 100%;
      }
    }

    .user_stack::-webkit-scrollbar {
      width: 0px;
    }

    .user_stack {
      width: 20%;
      background: #ebeff7;
      border-radius: 2.083vw;
      border: 0.0977vw solid #e3e6f1;
      color: #1c2653;
      padding: 3vh 2.87vh 3vh 2.87vh;
      overflow: hidden;
      overflow-y: scroll;

      .user_stack_title {
        font-size: 1.146vw;
        letter-spacing: .052vw;
        font-weight: 700;
        margin: 0 auto;
      }

      .user_stack_box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 3.4vh;

        .user_stack_box_left {

          p {
            font-size: .833vw;
            font-weight: 700;
            margin-bottom: 0.3vh;
          }

          span {
            display: block;
            font-size: .729vw;
          }
        }

        .user_stack_box_right {
          width: 1.667vw;

          img {
            display: block;
            width: 100%;

          }
        }
      }
    }

    .user_school {
      width: 14.285%;
      background: #3258f2;
      text-align: center;
      border-radius: 2.083vw;
      color: #fff;

      .user_school_icon {
        width: 1.771vw;
        display: block;
        margin: 1.771vw auto 1.40625vw auto;

        img {
          display: block;
          width: 100%;
        }
      }

      .user_school_logo {
        width: 5.3125vw;
        height: 5.3125vw;
        margin: 0 auto;

        img {
          display: block;
          width: 100%;
        }
      }


      .user_school_title div {
        width: 80%;
        font-size: .9375vw;
        font-weight: 700;
        margin: 0.829vw auto 0.429vw;
      }

      .user_school_title p {
        width: 80%;
        font-size: .729vw;
        margin: 0 auto 0.577vw;
      }
    }

    .user_exploit {
      width: 31.852%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background: #ebeff7;
      border: 0.0977vw solid #e3e6f1;
      border-radius: 2.083vw;
      position: relative;

      p {
        position: absolute;
        top: 3vh;
        left: 2.87vh;
        font-size: 1.354vw;
        font-weight: 700;
        color: #1c2653;
      }

      .user_exploit_box {
        height: 20vw;
        //width: 20vw;
        flex: 1;
        width: 80%;
        margin: 0 auto;
        margin-top: 18px;
      }
    }

  }
}
</style>
